<template>
  <div class="app-container">
    <!-- 主体 start -->
    <el-container>
      <el-main height>
        <!-- 表格 start -->
        <el-table
          border
          :data="list"
          v-loading="loading"
          style="width: 100%; margin-top: 30px"
        >
          <el-table-column
            align="center"
            prop="MonthlyPackage"
            label="套餐类型"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.MonthlyPackage == 1">试用</div>
              <div v-if="scope.row.MonthlyPackage == 2">月卡</div>
              <div v-if="scope.row.MonthlyPackage == 3">半年卡</div>
              <div v-if="scope.row.MonthlyPackage == 4">年卡</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Days"
            label="天数"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Price"
            label="价格"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="ServiceCharge"
            label="服务费（百分比）"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="RecFee"
            label="推荐费（百分比）"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Remarks"
            label="备注"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="CreateTime"
            label="创建时间"
          ></el-table-column>
          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="showPupop(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格 end -->
      </el-main>
    </el-container>
    <!-- 主体 end -->
    <!-- 查看弹窗 start -->
    <el-dialog
      title="修改"
      :visible.sync="pupopState"
      :close-on-click-modal="false"
      class="edit-form"
    >
      <el-form label-width="100px">
        <el-form-item label="套餐类型">
          <template slot-scope="scope">
            <div v-if="row.MonthlyPackage == 1">试用</div>
            <div v-if="row.MonthlyPackage == 2">月卡</div>
            <div v-if="row.MonthlyPackage == 3">半年卡</div>
            <div v-if="row.MonthlyPackage == 4">年卡</div>
          </template>
        </el-form-item>
        <el-form-item label="天数">
          <el-input
            v-model="row.Days"
            placeholder="请输入天数"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input
            v-model="row.Price"
            placeholder="请输入价格"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务费">
          <el-input
            v-model="row.ServiceCharge"
            placeholder="请输入服务费"
            clearable
            :style="{ width: '100%' }"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="推荐费" prop="RecFee">
          <el-input
            v-model="row.RecFee"
            placeholder="请输入推荐费"
            clearable
            :style="{ width: '100%' }"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pupopState = false">关 闭</el-button>
        <el-button type="primary" @click="config">确 认</el-button>
      </span>
    </el-dialog>
    <!-- 查看弹窗 end -->
  </div>
</template>

<script>
import { GetMonthlyPackage, AddOrUpdataRenewPackage } from "../../api/meal";
export default {
  data() {
    return {
      //表格参数
      loading: true,
      list: [],
      //弹窗参数
      pupopState: false,
      row: {
        Id: 0,
        MonthlyPackage: "",
        Days: "",
        Price: "",
        ServiceCharge: "",
        RecFee: "",
      },
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    //获取用户数据
    getList() {
      this.loading = true;
      GetMonthlyPackage().then((res) => {
        if (res.Code == 200) {
          this.list = res.Data;
          this.loading = false;
        }
      });
    },
    //确认修改
    config() {
      this.$confirm("是否修改该套餐", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          AddOrUpdataRenewPackage(this.row).then((res) => {
            if (res.Code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.pupopState = false;
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    //弹窗
    showPupop(row) {
      this.row = row;
      this.pupopState = true;
    },
  },
};
</script>
<style>
.box {
  border: 1px solid #ccc;
  padding: 10px 0;
  margin-top: 20px;
}
.title {
  font-weight: bold;
  margin-left: 20px;
  font-size: 20px;
  padding: 20px 0;
}
</style>
